// ----------------------------- 获取分类，渲染到页面中 ---------------------------
// 直接封装成函数，目的是，添加完成、删除完成、修改完之后，还要调用这个函数来重新渲染页面
// render -- 渲染
// category -- 类别
// ------------------------1.  获取类别列表，渲染到页面中 ---------------------// - category -- 类别
function renderCategory() {
  // 发送ajax请求，获取数据
  axios.get('/my/category/list').then(res => {
    // console.log(res.data);
    let { status,data } = res.data;
    if(status === 0){
      let str = '';
      data.forEach(item => {
        str += `
        <tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
              <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
              <button data-id="${item.id}" type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
            </td>
          </tr>
          `;
      });
      // 循环结束,把拼接得到的很多个tr放到tbody中
      $('tbody').html(str);
    }
  })
};
// 更新页面
renderCategory();


// ------------------------2.  删除分类 -----------------------
// 事件委托
$('tbody').on('click','.del',function() {
  // $(this) 表示删除按钮,不表示tbody
  let id = $(this).data('id'); //获取id 
  // 询问是否要删除 (对于敏感操作必须询问)
  layer.confirm('你是否要删除吗？', function (index) {
     // do something
    // 确定,调用接口,发送请求 发送ajax请求进行删除操作
    axios.get(`/my/category/delete?id=${id}`).then(res => {
      let {status ,message } = res.data;
      if(status === 0) {
        layer.msg(message);
        // 更新页面数据
        renderCategory();
      } 
    })
    layer.close(index); // 关闭弹层
  })
})

// ------------------------3.  添加功能 -----------------------
let addIndex;
//1. 点击添加按钮,出现弹层
$('button:contains("添加类别")').on('click',function() {
  addIndex = layer.open({
    type: 1,
    title: '添加类别',
    // 2.设置弹出内容
    content: $('#tpl-add').html(),
    area: ['500px','250px']
  });
})

// 3.表单提交,发送ajax请求,完成添加
// 注册表单的submit事件
$('body').on('submit','#add-form',function(e) {
  e.preventDefault() 
  // 规律：如果没有图片上传，一般都不使用FormData。
  let data = $(this).serialize();  //必须检查input的name
  // ajax提交数据，完成添加
  axios.post('/my/category/add',data).then(res => {
    let {status ,message } = res.data;
      if(status === 0) {
        layer.msg(message);
        // 更新页面的数据
        renderCategory();
        layer.close(addIndex);// 关闭弹层
      } 
  })
})


// ------------------------4.  修改功能 编辑 -----------------------
let editIndex;
// 1.点击 编辑按钮，显示弹层
$('tbody').on('click','button:contains("编辑")',function () {
  // 获取事件源上的 三个 data-xxx 属性值
  let shuju = $(this).data(); // 获取编辑三个属性值  不给data()传递参数,表示获取全部的data-xxx属性
  // console.log(shuju); // { name: 'xx', alias: 'xx', id: 2 } 获取的是对象
  editIndex = layer.open({
    type: 1,
    title: '编辑内容',
    // 2.设置弹出内容
    content: $('#tpl-edit').html(),
    area: ['500px','250px'],
    // 弹层弹出后的回调，不要和ajax中的success弄混了
    success: function () {
      // 3.必须等弹层出来之后,保证表单已经存在了,input已经出现了,再数据回填
      // 使用layui的form模块,快速的数据回填
      // 数据回填(不要忘记id)
      let form = layui.form;
      form.val('edit', shuju)
    }
  });
})


// 4,表单提交,完成修改
$('body').on('submit', '#edit-form', function (e) {
  e.preventDefault();
  // 收集表单各项值
  let data = $(this).serialize();
  // console.log(data);
  // ajax提交，完成修改
  axios.post('/my/category/update',data).then(res => {
    let { status, message} = res.data;
    if (status === 0) {
      layer.msg(message);
      renderCategory(); //更新页面的数据
      layer.close(editIndex) // 关闭弹层
    }
  })
}
)